<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #game {
        position: relative;
        width: 500px;
        height: 700px;
        border: 1px black solid;
        display: inline-block;
        left: 150px;
        top: 10px;
        background-color: rgb(192, 204, 200);
        float: left;
    }
    
    .box {
        width: 88px;
        height: 70px;
        left: 200px;
        bottom: 100px;
        position: absolute;
        pointer-events: none;
        background: url(./images/mm.png);
    }
    
    .life {
        position: relative;
        bottom: 0px;
        right: 10px;
        margin-top: 50px;
    }
    
    img {
        width: 30px;
        height: 30px;
        opacity: 0.7;
    }
    
    #game_statuc {
        position: relative;
        top: 100px;
        left: 200px;
        /* display: inline-block; */
    }
</style>

<body>
    <!-- 游戏框界面 -->
    <div id="game" @mousemove.self='move'>
        <div class="box"></div>
        <div v-for="(a,index) in emp" :class="c" :id="index" style="width: 50px; height: 50px; "></div>
    </div>


    <!-- 游戏状态界面 -->
    <div id="game_statuc">
        <go_cpn></go_cpn>
        <emp-cpn></emp-cpn>
    </div>



    <script src="./vue.min.js"></script>

    <script>
        let game = document.getElementById('game');
        let box = document.getElementsByClassName('box')[0];
        let div = document.createElement('div')


        //我机长相
        // box.style.backgroundImage = "url(" + ['./images/m.png'][0] + ")"

        //随机坐标数组
        let arr = [];
        //敌机数组
        let emtplant = [];
        let temp_emtplant = [];
        //敌机动态坐标范围数组
        let position_arr = [];
        //生命数组
        //let life_arr = ['./images/life.png', './images/life.png', './images/life.png', './images/life.png', './images/life.png']
        // 生命长度
        let life_arr = [, , , , , , , , ];
        //定义敌机波数数组
        let boshu = ['one', 'two', 'three'];
        //定义敌机递归数量
        let number = 0;


        for (let r = 0; r < 5; r++) {
            let position_obj = {
                X: Math.random() * game.offsetWidth,
                Y: Math.random() * game.offsetHeight
            }
            arr.push(position_obj);
        }

        //定义最初敌机数组长度
        const first_position_arr_length = arr.length;

        //生命血量组件
        Vue.component('emp-cpn', {
            data: function() {
                return {
                    life: life_arr
                }
            },
            template: `  
                <div class="life">
                    <h2>当前血量</h2>
                    <img v-for="e in life" src="./images/life.png" alt="ssss">
                </div>
            `,
        })
        let start_game = {
            template: `
                <div>
                    <h1>一起来打飞机^&^</h1>
                    <button @click="start">开始游戏</button>
                    <button @click="stop">暂停游戏</button>
                </div>
            `,
            methods: {
                start: function() {
                    emtplant = document.getElementsByClassName('myp')
                    if (emtplant.length > 0) {
                        father.initOrchange_postition(emtplant, arr)
                    }
                },
                stop: function() {
                    alert('块去撒个尿');
                },
                //重新开始游戏
                // rep_start: function() {
                //     clearInterval(s2);
                //     //father.change_postition(emtplant, arr)
                // }
            }
        }

        let game_statuc = new Vue({
            el: '#game_statuc',
            data: {},
            components: {
                go_cpn: start_game
            }
        })

        let father = new Vue({
            el: '#game',
            data: {
                c: 'myp',
                num: [1, 2, 3],
                emp: arr,
                position_arr_time: position_arr
            },
            methods: {
                move() {
                    let box = document.getElementsByClassName('box')[0];
                    box.style.left = event.offsetX - box.offsetWidth / 2 + 'px';
                    box.style.top = event.offsetY - box.offsetWidth / 2 + 'px';
                },
                initOrchange_postition(emtplant, arr) {
                    console.log(222222222222);
                    let game = document.getElementById('game');
                    temp_emtplant = Array.from(emtplant)
                        //初始化敌机
                    temp_emtplant.forEach((p, i) => {
                        p.style.Width = 30 + 'px'
                        p.style.Height = 30 + 'px'
                        p.style.position = "absolute"
                        p.style.backgroundImage = "url(" + ['./images/e.png'][0] + ")"
                            //先让它有offsetLeft
                        p.style.left = arr[i].X - p.offsetWidth + 'px'
                            //后判断防止占据边框
                        if (game.offsetWidth - p.offsetLeft < arr[i].X) {
                            p.style.left = arr[i].X - p.offsetWidth + 'px'
                        } else {
                            p.style.left = arr[i].X + 'px'
                        }
                        p.style.top = arr[i].Y / 5 + 'px'
                    });
                    this.move_postition()
                },
                isrepear() {
                    let game = document.getElementById('game');
                    let box = document.getElementsByClassName('box')[0];
                    for (let m = 0; m < position_arr.length; m++) {
                        //获取坐标范围
                        let temp_X1 = position_arr[m][0]
                        let temp_X2 = position_arr[m][1]
                        let temp_Y1 = position_arr[m][2]
                        let temp_Y2 = position_arr[m][3]

                        //定义范围
                        //因为我机比敌机大，所以是看敌机在不在我机的坐标范围内,要反过来了
                        let Mx = box.offsetLeft
                        let Dx = box.offsetLeft + box.offsetWidth
                        let My = box.offsetTop
                        let Dy = box.offsetTop + box.offsetHeight

                        // if (temp_X1 < box.offsetLeft && box.offsetLeft < temp_X2 && temp_Y1 < box.offsetTop && box.offsetTop < temp_Y2) {
                        if (Mx < temp_X1 && temp_X1 < Dx && My < temp_Y1 && temp_Y1 < Dy) {
                            if (life_arr.length > 1) {
                                life_arr.shift();
                                console.log(1111);
                            } else {
                                life_arr.shift();
                                //放在最后一条命还在却提示了
                                setTimeout(() => {
                                    alert('您已机毁人亡！！！');
                                }, 100);
                            }
                        }
                    }
                },
                move_postition() {
                    // clearInterval(s);
                    let p = temp_emtplant[0]
                    s2 = setInterval(() => {
                        // console.log(temp_emtplant);
                        position_arr = [];
                        temp_emtplant.forEach(p => {
                            p.style.top = p.offsetTop + 5 + 'px'
                                //保存敌机动态坐标(应该是面积)---简化直接记录差值
                            let a = [];
                            a.push(p.offsetLeft, p.offsetLeft + p.offsetWidth, p.offsetTop, p.offsetTop + p.offsetHeight);
                            position_arr.push(a)
                        })
                        this.isrepear();
                        this.isleave(position_arr);
                        this.isleave_game(position_arr);
                    }, 140);
                },
                //检验敌机是否过一半
                isleave(position_arr) {
                    let game = document.getElementById('game');
                    //以某个为标准
                    let Y = position_arr[first_position_arr_length * number][3]; //1、6、11、16 --- 使用初始化数组个数
                    //这里非常离谱，只有0.5和定时器的140毫秒达成共识
                    if (Y >= game.offsetHeight / 2 && Y < game.offsetHeight / 2 + 5) {
                        for (let r = 0; r < 5; r++) {
                            let position_obj = {
                                X: Math.random() * game.offsetWidth,
                                Y: Math.random() * game.offsetHeight
                            }
                            arr.push(position_obj);
                        }

                        setTimeout(() => {
                            //这里才能放递归计数，定时器最后也不行
                            ++number;
                            let emtplant = document.getElementsByClassName('myp')
                            temp_emtplant = Array.from(emtplant)
                            console.log(arr);
                            console.log(temp_emtplant);
                            temp_emtplant.forEach((p, i) => {
                                if (i > 4 * number) {
                                    p.style.Width = 30 + 'px'
                                    p.style.Height = 30 + 'px'
                                    p.style.position = "absolute"
                                    p.style.backgroundImage = "url(" + ['./images/e.png'][0] + ")"
                                        //先让它有offsetLeft
                                    p.style.left = arr[i].X - p.offsetWidth + 'px'
                                        //后判断防止占据边框
                                    if (game.offsetWidth - p.offsetLeft < arr[i].X) {
                                        p.style.left = arr[i].X - p.offsetWidth + 'px'
                                    } else {
                                        p.style.left = arr[i].X + 'px'
                                    }
                                    p.style.top = arr[i].Y / 5 + 'px'
                                }
                            });
                        }, 500);
                        clearInterval(s2)
                        this.move_postition(temp_emtplant)
                    }
                },
                //检验是否离开game
                isleave_game(position_arr) {
                    for (let f = 0; f < position_arr.length; f++) {
                        // if (position_arr[f])
                        let game = document.getElementById('game');
                        let Dbuttom = game.offsetHeight - position_arr[f][2]
                        if (Dbuttom < temp_emtplant[temp_emtplant.length - 1].offsetHeight) {
                            // temp_emtplant.shift(f)
                            // temp_emtplant = temp_emtplant.splice(f, 1)
                            temp_emtplant[f].style.display = 'none' //需要改成移除
                        }
                    }
                }
            }
        })

        let start = function() {
                emtplant = document.getElementsByClassName('myp')
                if (emtplant.length > 0) {
                    father.initOrchange_postition(emtplant, arr)
                }
            }
            // start();
    </script>
</body>

</html>
<!-- 抖动https://blog.csdn.net/desongzhang/article/details/113609928 -->
<!-- .self 阻止父往子传递事件 -->
<!-- /* 阻止父往子传递事件
let e1 = event.currentTarget;
let e2 = event.target;
console.log(e1 === e2);
if (e1 === e2) {
    let box = document.getElementsByClassName('box')[0];
    console.log(event.offsetX);
    box.style.left = event.offsetX - box.offsetWidth / 2 + 'px';
    box.style.top = event.offsetY - box.offsetWidth / 2 + 'px';
} -->

<!-- 实例包含两个组件 -->
<!-- 创建敌机采用类的不行因为几个div就几个敌机 -->
<!-- let temp_emtplant 不定义在外面，而是靠参数传会导致一次初始化敌机一次后来增加的敌机，虽然实际上已经是增加后的，但是会影响判断是否已经离开game -->
<!-- 敌机越界后需要移除 -->